<template>
  <div class="wrap">
        <input type="text" v-model="msg"  placeholder="输入你的待办事项">
        <button @click="add">确定</button>
      <ul>
        <li v-for="item in showList" :key="item.id">
          <input type="checkbox" @change="chanegItem(item.id)" :checked="item.isdone?true:false">
          <span>{{item.txt}}</span> -------<button @click="del(item.id)">删除</button>
        </li>
      </ul>
      <div>
        <button @click="changeData('all')">全部</button>
        <button @click="changeData('done')">已完成</button>
        <button @click="changeData('no')">未完成</button>
      </div>
  </div>
</template>
<script lang="ts">
import { defineComponent,reactive, toRefs ,computed} from 'vue'

import  todoDatas from './hooks/todoHook'

export default defineComponent({
  setup() {

      return {
          ...toRefs(todoDatas)
      }
  },
})
</script>
<style lang="less">
    .wrap{
      width: 80%;
      margin: 30px auto;
    }
</style>
